<template>
  <el-tabs v-model="mainContentName" class="demo-tabs" @tab-click="handleHeaderClick">
    <el-tab-pane class="bar-item" label="详情" name="detail">
      <div class="detail-container">
        <div>
          <div class="detailBodyTop"></div>
          <div class="detailBodyBottom">
            <div class="comment-input-container">
              <img src="../../assets/imags/bird.png"/>
              <input placeholder="说点什么吧"/>
            </div>
            <div>
              <div>
                <el-checkbox class="checkBox-autonym">实名发表</el-checkbox>
                <div class="addAttach">添加附件</div>
                <el-button type="primary" class="el-button-comment">发表评论</el-button>
              </div>

            </div>
            <div class="comment">全部评论<span>共0条</span></div>
            <img :src="image.empty"/>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane class="bar-item" label="提交作业" name="submit">
      <main class="cmps-student-submit">
        <div class="detail-header">
          <div class="cmp-work-list-card">
            <div class="layout-left flex-align">
              <img :src="image.zuoye" alt="">
              <div class="another-name">
                <span class="lable-type">作业</span>
              </div>
            </div>
            <div class="layout-right flex-baseline">
              <div class="layout-right-info">
                <h6 class="info-title">
                  title
                </h6>

                <!--                  <div class="statue-bar">-->
                <!--                            <span>-->
                <!--                              {{ work.endTime }}-->
                <!--                            </span>-->
                <!--                    <div class="el-divider el-divider&#45;&#45;vertical"/>-->
                <!--                    <i style="font-style: normal">已结束</i>-->
                <!--                    <div class="el-divider el-divider&#45;&#45;vertical"/>-->
                <!--                    <span>{{ work.type === 0 ? '个人作业' : '多人作业' }}</span>-->
                <!--                  </div>-->
                <!--                  <p class="learning-state">-->
                <!--                    <span v-if="!work.submitted" class="font-color&#45;&#45;warning">未提交</span>-->
                <!--                    <span v-else>已提交</span>-->
                <!--                  </p>-->
              </div>

              <div class="layout-right-functional" style="color: rgb(66, 133, 244)">
                <img :src="image.eyes" style="margin-right: 5px; width: 16px; height: 16px">
                查看谁提交了
              </div>
            </div>
          </div>
        </div>
        <div class="el-divider el-divider--horizontal"></div>
        <div class="submit-title">
          <div>提交内容</div>
          <el-button type="primary" @click="dialogVisible=true">确认提交</el-button>
          <el-dialog v-model="dialogVisible" title="确定提交" class="confirm_submit">
            <div>
              <div>成功提交后，作业截至时间前且老师未批</div>
              <div>改本作业时，可随时正常更新提交的作业</div>
            </div>

            <template #footer>
              <div class="submit-dialog-footer">
                <div>
                  <el-button @click="dialogVisible=false">取消</el-button>
                  <el-button type="primary" @click="() => {handleSubmit()}">确定</el-button>
                </div>

              </div>
            </template>
          </el-dialog>
        </div>
        <div class="submit-body">
          <div>作业附件</div>
          <div>
            <img src="../../assets/tips/upload.svg"/>
            <div>点击上传添加作业文件</div>
            <div>支持各类、文档、图片、代码、压缩包格式</div>
          </div>
          <div>作业留言<span>选填</span></div>
          <el-input type="textarea" :rows="5" placeholder="作业以附件的形式提交，留言仅作备注使用哦！"
                    class="message-textarea" v-model="taskInfo"/>
        </div>
      </main>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>

import {image} from "../../../../assets/index.js";
import {onMounted, ref} from "vue";
import {submitWork} from "../../../../api/work.js";
import user from "../../../../stores/user.js";
import {ElMessage} from "element-plus";

const userInfo = user()

const mainContentName = ref('submit')

const taskInfo = ref('')

const props = defineProps({
  work: Object
})

const handleHeaderClick = () => {

}

const handleSubmit = () => {
  submitWork({courseId: props.work.courseId, studentId: userInfo.id, illustrate: taskInfo.value, workId: props.work.workId})
      .then(res => {
        if (res.code === 200) {
          message('success', '提交成功')
          dialogVisible.value = false
        }
      })
}

const dialogVisible = ref(false)

const message = (type, text) => {
  ElMessage({
    message: text,
    type: type,
    plain: true,
  })
}
</script>

<style scoped>
.el-main {
  width: 1124px;
  margin: 0 auto;

  .el-tabs {
    .el-tabs__header {
      width: 1124px;
      margin: 0 auto 24px auto;
    }
  }
}

:deep(.el-tabs__content) {
  overflow: hidden;
  position: relative;

  .el-tab-pane {
    .cmps-student-submit {
      width: 1124px;
      margin: 0 auto;
      font-size: 12px;

      .detail-header {
        .cmp-work-list-card {
          width: 100%;
          display: flex;
          position: relative;

          .another-name {
            position: relative;
            margin-top: 5px;
            line-height: 13px;
            display: inline-block;
            width: 85px;
            text-align: center;
            max-height: 31px;
            margin-bottom: 2px;
          }

          .layout-left {
            display: flex;
            flex-direction: column;
            min-width: 85px;
            margin-right: 16px;
            font-size: 12px;

            img {
              height: 40px;
              max-width: 40px;
              margin: 0 auto 10px auto;
            }

            .another-name {
              position: relative;
              margin-top: 5px;
              line-height: 13px;
              display: inline-block;
              width: 85px;
              text-align: center;
              max-height: 31px;
              margin-bottom: 2px;
            }

            .lable-type {
              color: #3c4043;
              font-size: 13px;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 65px;
              max-height: 30px;
              line-height: 15px;
              word-break: break-all;
              display: inline-block;
              text-align: center;
            }
          }

          .layout-right {
            width: 100%;
            border-bottom: 1px solid #eee;
            padding: 0 0 4px;
            font-size: 14px;

            .layout-right-info {
              .info-title {
                font-size: 16px;
                margin-bottom: 12px;
                max-width: 500px;
                cursor: pointer;
                color: #212121;
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                white-space: normal;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }

              .statue-bar {
                color: #5f6368;
                font-size: 12px;
                font-style: normal;

                .el-divider .el-divider--vertical {
                  font-style: normal;
                  display: inline-block;
                  width: 1px;
                  height: 1em;
                  margin: 0 8px;
                  vertical-align: middle;
                  position: relative;
                }
              }

              .learning-state {
                font-size: 12px;
                padding-top: 8px;
              }

              .font-color--warning {
                color: #ff941f;
              }
            }

            .layout-right-functional {
              display: flex;
              align-items: center;
              justify-content: end;
              padding-right: 40px;
              flex: 1;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

.el-divider.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 12px 0;
  background-color: #dadce0;
  position: relative;
}

.detail-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.detailBodyTop {
  width: 1124px;
  height: 480px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.detailBodyBottom {
  min-height: 700px;

  > div:first-child {
    width: 1124px;
    height: 80px;
    background-color: #f8f9fa;
    margin-top: 30px;
    border-bottom: 2px solid #4285f4;
  }

  > div:nth-of-type(2) {
    width: 1124px;
    height: 70px;
    display: flex;
    flex-direction: row-reverse;

    > div {
      display: flex;
      margin-top: 20px;
    }
  }

  > img {
    position: relative;
    height: 200px;
    left: 400px;
    top: 100px;
  }
}

.comment-input-container {
  display: flex;

  > img {
    height: 40px;
    margin-top: 15px;
    margin-left: 15px;
  }

  > input {
    width: 1168px;
    height: 31px;
    margin-left: 20px;
    margin-top: 20px;
    border: none;
    background-color: #f8f9fa;

    &:focus {
      outline: none;
    }
  }
}

.checkBox-autonym {
  margin-top: 2px;
}

.comment {
  color: #3c4043;
  font-size: 20px;

  > span {
    font-size: 12px;
    color: #74787c;
    margin-left: 10px;
  }
}

.addAttach {
  line-height: 35px;
  font-family: font_family !important;
  font-size: 16px;
  font-style: normal;
  margin-left: 20px;
  margin-right: 20px;
  cursor: pointer;
}

.el-button-comment {
  width: 100px;
  height: 35px;
}

.submit-title {
  display: flex;
  justify-content: space-between;
  width: 1074px;
  height: 31px;
  margin-bottom: 24px;

  > div {
    font-size: 20px;
  }
}

.submit-body {
  width: 1124px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 24px;

  > div:first-child {
    font-size: 18px;
  }

  > div:nth-of-type(2) {
    width: 1074px;
    height: 200px;
    margin-top: 20px;
    background: #f8f9fa;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    > img {
      width: 50px;
      cursor: pointer;
    }

    > div:nth-of-type(1) {
      margin-top: 20px;
      font-size: 13px;
      color: #4285f4;
      cursor: pointer;
    }

    > div:nth-of-type(2) {
      font-size: 13px;
      margin-top: 10px;
      color: #74787c;
    }
  }

  > div:nth-of-type(3) {
    margin-top: 20px;
    font-size: 18px;

    > span {
      font-size: 13px;
      color: #74787c;
      margin-left: 15px;
    }
  }
}

.message-textarea {
  :deep(.el-textarea__inner) {
    display: block;
    margin-top: 20px;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #fff;
    border-radius: 4px;

  }
}

div:deep(.el-overlay-message-box) {
  text-align: center;
}

</style>

<style>
.confirm_submit{
  width: 400px;
  height: 231px;
  border-radius: 8px;
  padding: 20px 0 0 0;
  >div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    div{
      font-size: 18px;
      color: #606266;
    }
  }
}
.el-dialog__title{
  margin-top: 30px;
  margin-left: 160px;
}
.submit-dialog-footer{
  width: 400px;
  border-top: 1px solid #dadce0;
  >div{
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .el-button--primary{
    margin-left: 20px;
  }
}

</style>
